<template>
	<div class="Zhenrong">
		<template v-if='homeList.length > 0'>
			<div class="main">
				<div class="left T-sa">
					<span 
						v-for='(item,index) in homeList' 
						:data-pos='item.pos'
						v-if='item.pos=="99"'>{{item.num}}
					</span>
				</div>
				<div class="right T-sa">
					<span 
						v-for='(item,index) in awayList' 
						:data-pos='item.pos'
						v-if='item.pos=="99"'>{{item.num}}
					</span>
				</div>
			</div>
		</template>
		<div v-else class="noData">暂无比赛阵容！</div>
	</div>
</template>
<script>
export default {
	name: 'deatilZhenronglq',
	props:{
      homeList:Array,
      awayList:Array,
      aEngName:String,
      hEngName:String,
    },
	data: function(){
		return {}
	},
	methods:{
		goshooterDeatil(name,num){
			this.$router.push('/ShooterList/'+name+'/'+num)
		}
	},
	mounted:function() {
		
	},
	updated(){
	}
};
</script>

<style lang="less" scoped>
	@import '~styles/varibles.less';
	.main{
		position: relative;
		top: 0;
		left: 0;
		background: url(/static/img/bglq.png) no-repeat;
		background-size: 100% 100%;
		width: 7.5rem;
		height: 4.2rem;
		margin:auto;
	}
	.left{
		position:absolute;
		width: 50%;
		height: 4.2rem;
		left: 0;
		top: 0;
		span{
			position:absolute;
			width: .58rem;
			height: .63rem;
			background:url(/static/img/teamR.png) center no-repeat;
			background-size:100% 100%;
			text-align: center;
			line-height: .63rem;
			color:#fff;
		}
	}
	.right{
		position:absolute;
		width: 50%;
		height: 4.2rem;
		left: 50%;
		top: 0;
		span{
			position:absolute;
			width: .58rem;
			height: .63rem;
			background:url(/static/img/teamW.png) center no-repeat;
			background-size:100% 100%;
			text-align: center;
			line-height: .63rem;
			color:rgb(215, 44, 26);
		}
	}
	.T-sa>span:first-child{
		position: absolute;
		left:19%;
		top:40px;
	}
	.T-sa>span:nth-child(2){
		position: absolute;
		left:68%;
		top:40px;
	}
	.T-sa>span:nth-child(3){
		position: absolute;
		left:45%;
		top:42%;
	}
	.T-sa>span:nth-child(4){
		position: absolute;
		left:19%;
		bottom:40px;
	}
	.T-sa>span:last-child{
		position: absolute;
		left:68%;
		bottom:40px;
	}
	.T-sh>span:first-child{
		position: absolute;
		left:19%;
		top:40px;
	}
	.T-sh>span:nth-child(2){
		position: absolute;
		left:68%;
		top:40px;
	}
	.T-sh>span:nth-child(3){
		position: absolute;
		right:45%;
		top:42%;
	}
	.T-sh>span:nth-child(4){
		position: absolute;
		left:19%;
		bottom:40px;
	}
	.T-sh>span:last-child{
		position: absolute;
		left:68%;
		bottom:40px;
	}
</style>